<script>
	estado_transaccion='<?php echo $estado_transaccion?>';
	estado_correcto='Se ha registrado un nuevo plan exitosamente.';
	estado_incorrecto='Error al registrar un nuevo plan: No se pudo conectar al servidor. Por favor vuelva a intentarlo.';
</script>
<form name="form_social" method="post" action="<?php echo base_url()?>index.php/becarios/guardar_plan" enctype="multipart/form-data">
	<div id="wizard" class="swMain">
        <ul>
            <li>
                <a href="#step-1">
                    <span class="stepNumber">1<small>er</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Plan</small>
                    </span>
                </a>
            </li>
           <li>
                <a href="#step-2">
                    <span class="stepNumber">2<small>do</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Ubicación</small>
                    </span>
                </a>
            </li>
        </ul>
        <div id="step-1">	
            <h2 class="StepTitle">Ingreso de la información del Plan</h2>
        
            <p>
                <label class="label_textarea">Título del Proyecto: </label>
                <textarea name="titulo" style="resize:none; width:300px" rows="3" id="titulo"></textarea>
            </p>
            <p>
                <label>Período: 
                Desde: </label> <input id="start" style="width: 200px"  name="inicio" /> 
                Hasta: <input id="end" style="width: 200px" name="fin"/>
            </p> 
            <br>
              <p>
                <label id="lciclo" for="ciclo">Ciclo: </label> 
                <input id="ciclo"  style="width: 100px;" name="ciclo" type="text" /> 

            </p>         
        </div>          
        <div id="step-2">   
            <h2 class="StepTitle">Ubicación donde se realizará el proyecto</h2>
            <p>
                <label style="width:150px">Municipio: </label>
                   <select name="municipio" id="municipio" class="select" tabindex="6" placeholder="[Seleccione...]" style="width:275px;">
                <?php
                     foreach($municipios as $val) {
                         echo '<option value="'.$val['id'].'">'.ucwords($val['nombre']).'</option>';
                     }
                ?>
                </select>
            </p>
            </td>
            <td>
            <p>
                <label style="width:150px" class="label_textarea">Dirección: </label>
                <textarea name="detalle" style="resize:none; width:300px"></textarea>
            </p>
               <p>
                <label style="width:150px" class="label_textarea">Centro/Comunidad: </label>
                <textarea name="comunidad" style="width:300px;resize:none"></textarea>
            </p>

        </div>      
    </div>
</form>
</div>
<script language="javascript">
$(document).ready(function(){
	
	$('#wizard').smartWizard();
    $('#titulo').validacion({
        men: "No debe quedar vacio"        
    });
    $("#ciclo").validacion({
        lonMin:6,
        lonMax:6, 
        men:"Debe de estar con el formato correcto (#-20YY)", 
        patt: /[1-2]{1}[-]{1}[2]{1}[0]{1}[1-4]{1}[0-9]{1}/i
    });

	
	function startChange() {
                        var startDate = start.value(),
                        endDate = end.value();

                        if (startDate) {
                            startDate = new Date(startDate);
                            startDate.setDate(startDate.getDate());
                            end.min(startDate);
                        } else if (endDate) {
                            start.max(new Date(endDate));
                        } else {
                            endDate = new Date();
                            start.max(endDate);
                            end.min(endDate);
                        }
                    }

                    function endChange() {
                        var endDate = end.value(),
                        startDate = start.value();

                        if (endDate) {
                            endDate = new Date(endDate);
                            endDate.setDate(endDate.getDate());
                            start.max(endDate);
                        } else if (startDate) {
                            end.min(new Date(startDate));
                        } else {
                            endDate = new Date();
                            start.max(endDate);
                            end.min(endDate);
                        }
                    }

                    var start = $("#start").kendoDatePicker({
                        change: startChange,
                        culture: "es-SV",
                        format: "dd/MM/yyyy"
                    }).data("kendoDatePicker");

                    var end = $("#end").kendoDatePicker({
                        change: endChange,
                        culture: "es-SV",
                        format: "dd/MM/yyyy"
                    }).data("kendoDatePicker");

                    start.max(end.value());
                    end.min(start.value());

});



</script>